<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh;">
		<view class="d-flex d-flex-column px-3" style="padding-top: 250rpx;">
			<view class="d-flex d-flex-column d-flex-middle mb-10">
				<view class="welcom main-color">欢迎登录注册</view>
				<view class="font22 color999">首次验证通过即成功注册账号</view>
			</view>
			
			<view class="inpt d-flex d-flex-middle mb-4">
				<text class="iconfont icon-zhanghu colorhold mr-1"></text>
				<input v-model="phoneNum" class="d-flex-item" placeholder="请输入手机号码" placeholder-class="colorhold" />
			</view>
			<view class="inpt d-flex d-flex-middle d-flex-between mb-8">
				<text class="iconfont icon-xinxi colorhold font28 mr-1"></text>
				<input class="d-flex-item" v-model="code" placeholder="短信验证码" placeholder-class="colorhold" />
				<view class="code-send" @click="sendCode" :class="totalTime<60?'sending':''">{{codeBtnText}}</view>
			</view>

			<view class="d-flex d-flex-middle mb-2">
				<checkbox :checked="isChecked" color="#598dfc" style="transform:scale(0.6)"
					@click="isChecked = !isChecked"></checkbox>
				<view>
					<text class="font24 color999" @click="isChecked = !isChecked">我已阅读并同意</text>
					<text class="font24 main-color" @click="goUrl('/subPages/agreement/agreement')">《用户协议》</text>
					<text class="font24 color999">和</text>
					<text class="font24 main-color" @click="goUrl('/subPages/privacy/privacy')">《隐私条款》</text>
				</view>
			</view>
			<button class="login-button d-flex d-flex-middle d-flex-center bg-main mb-3" :disabled="isLogin" @click="sure">{{isLogin?'登录中...':'登陆/注册'}}</button>
			
			<button class="login-button d-flex d-flex-middle d-flex-center bg-wx" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	import { userApi } from '@/http/userApi.js';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				isLogin: false,
				isChecked: true,
				phoneNum:'',
				code:'',
				totalTime:60,
				codeBtnText:'发送验证码'
			}
		},
		methods: {
			async decryptPhoneNumber(e) {
				let that = this
				let params = {
					code: e.detail.code,
					invite_code: ''
				}
				try {
					uni.showLoading({
						title:'登录中...',
						mask:true
					})
					let udata = await userApi.wxLogin(params)
					uni.hideLoading()
					uni.setStorageSync(USER_TOKEN, udata.token)
					store.commit('setUserInfo', udata.users)
					if (!udata.users.openid || udata.users.openid === '') {
						uni.redirectTo({
							url: '/subPages/user-info/user-info'
						});
					} else {
						uni.navigateBack()
					}
					that.isLogin = false
				} catch (e) {
					uni.hideLoading()
					that.isLogin = false
				}
			},
			sendCode() {
				let that = this
				if(that.phoneNum.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
				}
				if(that.totalTime == 60){
					uni.showLoading({
						title:'发送中...',
						mask:true
					})
					userApi.sendCode({
						'phone':that.phoneNum,
						'type':'login'
					}).then((res)=>{
						that.code = res+''
						uni.hideLoading()
						that.startTimer()
					})
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.codeBtnText = `${this.totalTime}s后发送`;
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.codeBtnText = '发送验证码';
						this.totalTime = 60
				    } else {
				        this.totalTime--;
				        this.codeBtnText = `${this.totalTime}s后发送`;
				    }
				}, 1000);
			},
			sure(){
				let that = this
				if(that.phoneNum.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
				}
				if(that.code == ''){
					uni.showToast({
						title:'请输入短信验证码',
						icon:'none'
					})
					return
				}
				that.isLogin = true
				userApi.userLogin({
					'phone':that.phoneNum,
					'code':that.code,
					'type':'login'
				}).then((udata)=>{
					that.isLogin = false
					uni.setStorageSync(USER_TOKEN, udata.token)
					store.commit('setUserInfo', udata.users)
					if (!udata.users.openid || udata.users.openid === '') {
						uni.redirectTo({
							url: '/subPages/user-info/user-info'
						});
					} else {
						uni.navigateBack()
					}
				}).catch(()=>{
					that.isLogin = false
				})
			},
			goUrl(url){
				console.log('url',url)
				uni.reLaunch({
					url: '/subPages/user-info/user-info'
				})
			},
			usernfo(){
				uni.navigateTo({
					url:'/subPages/user-info/user-info'
				})
			}
		}
	}
</script>

<style scoped>
.welcom{
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	font-weight: 500;
	font-size: 52rpx;
}
.inpt{
	position: relative;
	border: 1px solid #d0d2d9;
	height: 96rpx;
	padding-left: 30rpx;
	border-radius: 16rpx;
	box-sizing: border-box;
	transition: all .2s linear;
}
.inpt:hover{
	border-color: #438afc
}
.login-button{
	border-radius: 60rpx;
	height: 96rpx;
	width: 690rpx;
	font-size: 32rpx;
	font-weight: 500;
	border: solid 1px #438afc;
	cursor: pointer;
	color: #fff;
	padding: 0;
	transition: all .2s linear;
}
.bg-wx{
	background-color: #fff;
	color: #598dfc;
}
.login-button::after{border-width: 0!important;}
.code-send{
	font-size: 30rpx;
	background-color: #fff;
	padding: 0 40rpx;
	color: #598dfc;
}
.sending{
	color: #999;
	white-space: nowrap;
	font-size: 30rpx;
	letter-spacing: 0;
	cursor: default;
}
</style>
